@extends('admin.common.base-master')

@section('html-head')
    <link href="{{url('css/jquery.form.css')}}" type="text/css" rel="stylesheet" />
    <script src="{{url('/js/lib/jquery.form.js')}}"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
    <link href="{{url('js/lib/jquery-ui-timepicker-addon.css')}}" type="text/css" />
    <script src="{{url('js/lib/jquery-ui-timepicker-addon.js')}}" type="text/javascript"></script>
    <script src="{{url('js/lib/jquery.ui.datepicker-zh-CN.js')}}" type="text/javascript"></script>
    <script src="{{url('js/lib/jquery-ui-timepicker-zh-CN.js')}}" type="text/javascript"></script>
    <style>
        .btn_add_classify{
            background: #31bcd3;margin-left:10px;height: 5px;width: 50px;color: white;text-align: center;padding:5px;border-radius:7px;box-shadow: 3px 2px 9px #888888;
        }
    </style>
    @include('UEditor::head')
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">计划管理</a>
            <em>></em>
            <a href="#">添加计划</a>
        </div>
        <!-- cur-position end -->

        <div class="gg-step">
            <form  id="advform">
                <input type="hidden" name="id" id="plan_id" value="@if($plan){{$plan->id}}@endif"/>

                <div class="gg-list">
                    <label class="tit">计划名称：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入计划名称" name="title" id="title" value="@if($plan){{$plan->title}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">计划描述：</label>
                    <div class="cont">
                        <textarea style="width: 480px;height: 80px" id="desc">@if($plan){{$plan->desc}}@endif</textarea>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">顶部视频</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;">
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div id="showimg">
                        </div>
                        <div class="btn" style="background: #00A2D4">
                            <span id="inputVideo">添加视频</span>
                            <input id="video_id" type="hidden" name="video_id" value="@if($plan){{$plan->video_id}}@endif">
                        </div>
                        <div class="progress">
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>
                        <p class="text" id="uploadVideoInfo">上传视频（图片格式为mp4）</p>

                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">顶部图片：</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;">
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div id="showimg">
                        </div>
                        <div class="btn" style="background: #00A2D4">
                            <span id="inputImage2">添加图片</span>
                            <input id="img_id2" type="hidden" name="img_id2" value="@if($plan){{$plan->banner_img_id}}@endif">
                        </div>
                        <div class="progress">
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>
                        <p class="text" id="uploadthumb2">上传顶部图片（图片格式为jpg、png、gif，建议高300px）</p>
                        <img id="img_show2" style="width: 100px;padding-top: 3px;" src="" />

                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">计划人数：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入计划名称" name="plan_num" id="plan_num" value="@if($plan){{$plan->plan_num}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入数字</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">发起人：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入计划发起人" name="author" id="author" value="@if($plan){{$plan->author}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">会员金额：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入会员金额" name="amount" id="amount" value="@if($plan){{$plan->amount}}@endif" /><cite id="title_re" class="required">*</cite>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">抽选人数：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入抽选人数" name="select_num" id="select_num" value="@if($plan){{$plan->select_num}}@endif" /><cite id="title_re" class="required">*</cite>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">虚拟人数：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入虚拟人数" name="invent_num" id="invent_num" value="@if($plan){{$plan->invent_num}}@else 0 @endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">设置虚拟人数以改变计划金额</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">虚拟增加：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入虚拟人数每15分钟增加值" name="up_num" id="up_num" value="@if($plan){{$plan->up_num}}@else 0 @endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">每15分钟增加的人数</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">时间设置：</label>
                    <div class="cont">
                        <label class="gg-radio">
                            <input class="gg-ipt" style="width: 130px;" type="text" placeholder="请选择开始时间" name="start_time" id="start_time" value="@if($plan){{$plan->start_time}}@endif" />
                            <cite>开始</cite>
                        </label>
                        <label class="gg-radio">
                            <input class="gg-ipt" style="width: 130px;margin-left: 10px" type="text" placeholder="请选择结束时间" name="end_time" id="end_time" value="@if($plan){{$plan->end_time}}@endif" />
                            <cite>结束</cite>
                        </label>
                        <label class="gg-radio">
                            <input class="gg-ipt" style="width: 130px;margin-left: 10px" type="text" placeholder="请选择抽选时间" name="select_time" id="select_time" value="@if($plan){{$plan->select_time}}@endif" />
                            <cite>抽选</cite>
                        </label>
                    </div>
                </div>

                <div class="gg-list" data-id="ggzst2">
                    <label class="tit">视频缩略图</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;">
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div id="showimg">
                        </div>
                        <div class="btn" style="background: #00A2D4">
                            <span id="inputImage">添加图片</span>
                            <input id="img_id" type="hidden" name="thumb_id" value="">
                        </div>
                        <div class="progress">
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>
                        <p class="text" id="uploadthumb">上传视频缩略图（图片格式为jpg、png、gif，规格：高限315px）</p>
                        <img id="img_show" style="width: 100px;padding-top: 3px;" src="" />

                    </div>
                </div>

                <div class="gg-list" data-id="ggwz">
                    <label class="tit">计划内容(免费部分)：</label><br />
                    <div class="cont">
                        <textarea placeholder="请输入计划内容" name="description" id="aa"></textarea>
                    </div>
                </div>

                <div class="gg-list" data-id="ggwz">
                    <label class="tit">计划内容(收费部分)：</label><br />
                    <div class="cont">
                        <textarea placeholder="请输入计划内容" name="description" id="bb"></textarea>
                    </div>
                </div>

            </form>
            <div class="gg-list" >
                <label class="tit">&nbsp;</label>
                <div class="cont" >
                    <a href="javascript:;" class="next-step" id="btn_send">提交</a>
                </div>
            </div>
        </div>
    </div>

    <div class="upPop-box">
        <div class="backdrop"></div>
        <div id="upPop" class="info-pop tixian">
            <a class="close" href="javascript:void(0);"></a>
            <h3>添加分类</h3>

            <div class="fill-list">
                <span class="fill-tit">分类名：</span>
                <input class="fill-ipt" type="text" name="add_classify" id="add_classify">
            </div>

            <input type="hidden" name="id">
            <div class="fill-list">
                <span class="fill-tit">&nbsp;</span>
                <input class="fill-submit" type="button" id="subThisForm" value="提交">
            </div>
        </div>
    </div>

    <!-- content end -->
    <script>
        function upPop() {
            $('.upPop-box').upPop();
        }

        $('[data-radio=charge_yes]').on('click',function() {
            $('#charge').show('slow');
        });

        $('[data-radio=charge_no]').on('click',function() {
            $('#charge').hide('slow');
        });

        $('[data-radio=charge_two]').on('click',function() {
            $('#onelevel').show('slow');
        });

        $('[data-radio=charge_one]').on('click',function() {
            $('#onelevel').hide('slow');
        });

        $(function() {

            jQuery('#start_time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd",
                beforeShow: function () {
                    setTimeout(
                        function () {
                            $('#ui-datepicker-div').css("z-index", 1000);
                        }, 100
                    );
                }
            });

            jQuery('#end_time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd",
                beforeShow: function () {
                    setTimeout(
                        function () {
                            $('#ui-datepicker-div').css("z-index", 1000);
                        }, 100
                    );
                }
            });

            jQuery('#select_time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd",
                beforeShow: function () {
                    setTimeout(
                        function () {
                            $('#ui-datepicker-div').css("z-index", 1000);
                        }, 100
                    );
                }
            });

            <!-- 实例化编辑器 -->
            var ue = UE.getEditor('aa',{
                autoHeightEnabled: true,
                initialFrameHeight:400,
                initialFrameWidth:600,
                toolbars: [
                    ['fullscreen','source','undo','redo','|','fontsize','horizontal','|','simpleupload','insertvideo','removeformat'],
                    ['bold', 'italic', 'underline', 'forecolor', 'backcolor','|','indent','|','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight','|','insertunorderedlist', 'insertorderedlist','|', 'imagenone','imageleft','imageright','imagecenter','|','link']
                ]
            });

            @if($plan)
            ue.ready(function() {
                ue.setContent('<?php echo $plan->free_content ?>');
            });
            @endif

            <!-- 实例化编辑器 -->
            var ue2 = UE.getEditor('bb',{
                autoHeightEnabled: true,
                initialFrameHeight:400,
                initialFrameWidth:600,
                toolbars: [
                    ['fullscreen','source','undo','redo','|','fontsize','horizontal','|','simpleupload','insertvideo','removeformat'],
                    ['bold', 'italic', 'underline', 'forecolor', 'backcolor','|','indent','|','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight','|','insertunorderedlist', 'insertorderedlist','|', 'imagenone','imageleft','imageright','imagecenter','|','link']
                ]
            });

            @if($plan)
            ue2.ready(function() {
                ue2.setContent('<?php echo $plan->content ?>');
            });
            @endif

            $('#btn_send').click(function () {
                var title       = $('#title').val();
                var amount      = $('#amount').val();
                var select_num  = $('#select_num').val();
                var invent_num  = $('#invent_num').val();
                var start_time  = $('#start_time').val();
                var end_time    = $('#end_time').val();
                var select_time = $('#select_time').val();
                var id          = $('#plan_id').val();
                var img_id2     = $('#img_id2').val();
                var videoId     = $('#video_id').val();
                var upNum       = $('#up_num').val();
                var author      = $('#author').val();
                var desc        = $('#desc').val();
                var planNum     = $('#plan_num').val();
                var free_content = '';
                var content = '';

                ue.ready(function() {
                    free_content = ue.getContent();
                });

                ue2.ready(function() {
                    content = ue2.getContent();
                });

                $.ajax({
                    url:"{{route('Api.Admin.Plan.setPlan')}}",
                    type:'post',
                    dataType:'json',
                    data:{
                        id:id,
                        title:title,
                        amount:amount,
                        select_num:select_num,
                        invent_num:invent_num,
                        start_time:start_time,
                        end_time:end_time,
                        select_time:select_time,
                        content:content,
                        free_content:free_content,
                        up_num:upNum,
                        author:author,
                        video_id:videoId,
                        banner_id:img_id2,
                        desc:desc,
                        plan_num:planNum,
                    },
                    success:function (obj) {
                        if(obj.level == 'success'){
                            noty({text:obj.message,type:obj.level,timeout:600,
                                callback:{
                                    afterClose:function(){
                                        window.location.href="{{route('Admin.Home.planList')}}";
                                    }
                                }
                            });
                        }else {
                            noty({text:obj.message,type:obj.level,timeout:600});
                        }
                    },
                    error:function (obj) {
                        console.log(obj);
                    }
                });
            });

            //缩略图上传代码
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImage',
                url: '{{route("Api.Upload.uploadVideoImg")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '5mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#uploadthumb').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#img_id').val(responseObj.data.id);
                            var imgURL = responseObj.data.img_url + "?" + Math.random();
                            $('#img_show').attr("src",imgURL);
                            $('#uploadthumb').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#uploadthumb').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader.init();


            //上传banner图
            //缩略图上传代码
            var uploader2 = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImage2',
                url: '{{route("Api.Upload.uploadVideoImg")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '5mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#uploadthumb2').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#img_id2').val(responseObj.data.id);
                            var imgURL = responseObj.data.img_url + "?" + Math.random();
                            $('#img_show2').attr("src",imgURL);
                            $('#uploadthumb2').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#uploadthumb2').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader2.init();

            //缩略图上传代码
            var uploaderVideo = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputVideo',
                url: '{{route("Api.Upload.uploadVideo")}}',

                chunk_size: '100mb',
                filters: {
                    max_file_size: '50mb',
                    mime_types: [
                        {title: "Image files", extensions: "mp4"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'video',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#uploadVideoInfo').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#video_id').val(responseObj.data.id);
                            $('#uploadVideoInfo').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#uploadVideoInfo').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploaderVideo.init();
        });
    </script>
@endsection